<template>
    <div class="wrap">
        <van-nav-bar
          :title="title"
          style="z-index:1000;"
        /> 
        <main>
            <div class="search">
                 <van-icon @click="tap()" name="arrow-left" />
                 <input type="text">
            </div>
            <div class="content">
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item @click="toProlist(item.id)" :to="'/category/prolist/'+item.id" :title="item.categoryName" v-for="item in categoryList"/>
                </van-sidebar>
                <router-view @toparent="getVal"></router-view>
            </div>
        </main>
    </div>
</template>

<script>
import * as api from '../api/getProlist'
export default {
    name:'Supermarket',
    data(){
        return{
            value:'',
            activeKey: 0,
            list:[],
            categoryList:[],
            title:'商品分类',
            id:'',
        }
    },
    methods: {
        tap(){
            this.$router.push('/index')
        },
        getVal(msg){
            this.title = msg
            console.log(msg)
        },
        toProlist(pid){
            this.id = pid
        }

  },
  mounted(){
      this.categoryList = this.$store.state.categoryList
      let obj = this.categoryList.filter(v=>v.id==this.$route.params.id)[0]
      console.log(obj._id)  
      this.activeKey = obj._id
  },

}
</script>

<style scoped>
    .wrap{
        position: relative;
    }
    .wrap::-webkit-scrollbar{
        display:none;
    }
    main::-webkit-scrollbar{
        display:none;
    }
    .van-nav-bar{
        height: 44px;

    }
    main{
        margin-top:42px;
    }
    main .search{
        display: flex;
        padding: 0 10px;
        z-index:1000;
        height:38px;
        position: fixed;
        width:100%;
        background:rgb(255, 255, 255);
    }
    .van-nav-bar{
        position: fixed;
        top:0;
        width:100%;
        z-index: 1000;
    }
    main .search .van-icon{
        margin-top:6px;
    }
    main .search input{
        width:300px;
        height:28px;
        border-radius:28px;
        border:0;
        margin-top:6px;
        background:#efefef;
        padding-left:30px;
        box-sizing: border-box;
        font-size:18px;
        margin-left:34px;
    }
    main{
        position: relative;
        overflow: hidden;
        padding:0;
    }
    main .search .van-icon{
        font-size: 20px;
        margin-top: 7px
    }
    main .van-sidebar .van-sidebar-item {
        text-align: center;
        background: rgb(246, 245, 245);
    }
    main .van-sidebar h2{
        text-align: center;
        background: rgb(246, 245, 245);
    }
   .content{
       display:flex;
       margin-top:40px;
   }
    .van-sidebar{
      min-height:550px;
      overflow: auto;
      position:fixed;
      z-index:100;
   }
</style>